<template>
  <div>
    用户名:<input type="text" v-model="username" />
    <p>姓名:<input v-model="p1.name" type="text" /></p>
    <p>年龄:<input v-model="p1.age" type="text" /></p>
  </div>
</template>

<script>
export default {
  name: "VueBaseApp",

  data() {
    return {
      username: "赖酱是猪",
      p1: {
        name: "赖酱",
        age: 98,
      },
    };
  },

  watch: {
    username(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    p1: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    },
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>